<template>
  <a-modal
    class="productManage"
    :visible="visible"
    :title="opration == 'add' ? '新增标签' : '修改标签'"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :closable="true"
    :confirmLoading="confirmLoading"
    width="700px"
    @cancel="closeModal()"
    @ok="handleSubmit"
  >
    <div>
      <div class="formItem">
        <div
          class="formLable"
          :style="{
            color: nameRule ? 'red' : '#000',
          }"
        >
          <span style="color: red">*</span>标签名称
        </div>
        ：
        <div class="formInput">
          <a-input
            v-model="params.name"
            style="width: 200px"
            placeholder="输入标签名称，限1-6字"
            :max-length="6"
          />
        </div>
      </div>
      <div class="formItem">
        <div
          class="formLable"
          :style="{
            color: sortRule ? 'red' : '#000',
          }"
        >
          <span style="color: red">*</span>标签排序
        </div>
        ：
        <div class="formInput">
          <a-input-number
            :precision="0"
            :min="1"
            :max="20"
            v-model="params.sort"
            :maxLength="2"
            placeholder="填写1-20的整数"
            style="width: 160px"
            v-if="shopRoleCode == 'role:store:main' && totalShopLabel"
          />
          <a-input-number
            :precision="0"
            :min="21"
            v-model="params.sort"
            :maxLength="2"
            placeholder="填写大于21的整数"
            style="width: 160px"
            v-else
          />
          <span style="color: #d9d9d9; margin-left: 10px"
            >注：数字越往大越靠后</span
          >
        </div>
      </div>
    </div>
    <template slot="footer">
      <a-button key="back" @click="closeModal"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleSubmit">
        确定
      </a-button>
    </template>
  </a-modal>
</template>
<script>
export default {
  name: "addLable",
  props: {
    shopRoleCode: {
      type: String,
      default: "",
    },
    opration: {
      type: String,
      default: "add",
    },
    labelId: {
      type: String,
      default: "",
    },
    type: {
      type: Boolean,
      default: false, //判断是否是从标签列表新增还是从创建视频时创建
    },
    totalShopLabel: {
      type: Boolean,
      default: true, //判断是不是总店标签
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      params: {},
      nameRule: false,
      sortRule: false,
      allTagNum: 0,
    };
  },
  methods: {
    async addLable() {
      let res = await this.$post("/video/label/add", this.params);
      if (res && res.returnCode == 1000) {
        this.$message.success("新增标签成功");
        if (!this.type) {
          this.$emit("initTable");
        }
      }
    },
    handleSubmit() {
      this.confirmLoading = true;
      // console.log(this.params);
      if (!this.params.name || this.params.name.length == 0) {
        this.$message.error("标签名称不能为空");
        this.nameRule = true;
        return;
      } else {
        this.nameRule = false;
      }
      if (!this.params.sort || this.params.sort.length == 0) {
        this.$message.error("标签排序不能为空");
        this.sortRule = true;
        return;
      } else {
        this.sortRule = false;
      }
      if (this.opration == "add") {
        if (this.shopRoleCode == "role:store:main") {
          if (this.allTagNum >= 20) {
            this.$message.warning("总店最多可创建20个标签");
          } else {
            this.addLable();
            this.visible = false;
          }
        } else {
          if (this.allTagNum >= 10) {
            this.$message.warning("分店最多可创建10个标签");
          } else {
            this.addLable();
            this.visible = false;
          }
        }
        if (this.type) {
          let tiemr = setTimeout(() => {
            this.$emit("getAllTags");
            this.visible = false;
            clearTimeout(tiemr);
          }, 500);
        }
      } else {
        this.updateLable();
        this.visible = false;
      }
    },
    closeModal() {
      this.visible = false;
      this.$emit("cancel", false);
    },
    async getLableInfo(id) {
      let res = await this.$get("/video/label/id", { id });
      if (res && res.returnCode == 1000) {
        this.params = {
          name: res.dataInfo.name,
          sort: res.dataInfo.sort,
        };
      }
    },
    async updateLable() {
      let res = await this.$post("/video/label/update", {
        id: this.labelId,
        ...this.params,
      });
      if (res && res.returnCode == 1000) {
        this.$message.success("修改标签成功");
        this.visible = false;
        this.$emit("initTable");
      }
    },

    async getLabelNum() {
      let res = await this.$get("video/label/list");
      if (res && res.returnCode == 1000) {
        this.allTagNum = 0;
        if (this.shopRoleCode == "role:store:main") {
          res.dataInfo.forEach((item) => {
            if (item.totalShopLabel) {
              this.allTagNum++;
            }
          });
        } else {
          res.dataInfo.forEach((item) => {
            if (!item.totalShopLabel) {
              this.allTagNum++;
            }
          });
        }
      }
    },
  },
  watch: {
    visible(y) {
      if (y) {
        // console.log(this.totalShopLabel, "00000000");
        if (this.opration == "add") {
          this.params = {};
          this.getLabelNum();
        } else {
          this.getLableInfo(this.labelId);
        }
      }
    },
  },
};
</script>
<style scoped lang="less">
.formItem {
  display: flex;
  align-items: center;
  .formLable {
    width: 25%;
    text-align: right;
  }
  .formInput {
    width: 75%;
  }
}
.formItem + .formItem {
  margin-top: 20px;
}
</style>